<script setup>
import {Van} from '@element-plus/icons-vue';
import { useRouter} from "vue-router";
const router = useRouter()

const activities = [{
  content: '下单成功',
  timestamp: '2024-07-02 17:40:50',
  size: 'large',
  color: '#1380dc'

}, {
  content: '物流公司已揽件',
  timestamp: '2024-07-03 13:40:50',
  size: 'large',
  color: '#0bbd87'
}, {
  content: '商品已到达浙江省转运中心',
  timestamp: '2024-07-03 13:40:50',
  size: 'large',
  color: '#9b55e0'
}, {
  content: '商品已到达珠海市转运中心',
  timestamp: '2024-07-03 13:40:50',
  size: 'large',
  color: '#02a2a2'
}, {
  content: '商品已到达佛山市转运中心',
  timestamp: '2024-07-03 13:40:50',
  size: 'large',
  color: '#a1870c'
}];

const back=()=>{
  router.push('/service')
}
</script>

<template>
    <el-card class="box_contenier">
      <div class="title">
        <div>
          <el-icon><Van /></el-icon>
          销售时间：2024-07-02 17:40:50
        </div>
        <div class="flex">
          <el-button @click="back">返回中心</el-button>
        </div>
      </div>

      <div class="block">
        <el-timeline>
          <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

</template>

<style scoped lang="scss">
.title{
  display: flex;
  justify-content: space-between;
  align-items: center;

  .flex button{
    border-radius:20px 20px 20px 20px;
    background-color: dodgerblue;
    color: white;
  }
}
.block{
  display: flex;
  margin-top: 15px;
}
</style>
